@use "@/assets/scss/head.scss";

.container {


    .designBox {
        width: 100%;
        background-color: #F2F6F9;
        padding: 0.6rem 10%;
        box-sizing: border-box;

        .title {
            margin-bottom: 0.5rem;

        }

        .item {
            width: 100%;
            height: 4.3rem;
            overflow: hidden;
            margin-bottom: 30px;
            position: relative;

            .imgBox {
                width: 100%;
                height: 100%;
                overflow: hidden;

                .img {
                    width: 100%;
                    height: 100%;
                    display: block;
                    object-fit: fill;
                    transition: opacity .4s ease-in, transform .6s linear;
                    object-fit: cover;
                }
            }

            .infoMask {
                background-color: rgba($color: #0252A6, $alpha: 0.6);
                transition: all 0.5s;
                position: absolute;
                inset: 0;
                z-index: 9;
                opacity: 0;
            }

            .infoBox {
                transition: all 0.5s;
                position: absolute;
                inset: 0;
                z-index: 10;
                padding: 39px 0 30px;
                transform: translateY(3.1rem);

                .titleBox {
                    padding: 0 0.9rem;
                    box-sizing: border-box;
                    width: 100%;
                }

                .barBox {
                    width: 100%;
                    transform: scaleY(0.5);
                    height: 1px;

                    .slideBox {
                        height: 100%;
                        background-color: #FFFFFF;
                    }

                    .centerBox {
                        width: 116px;
                        height: 100%;
                        background-color: #0252A6;
                    }
                }

                .content {
                    padding: 0 0.6rem;
                    text-align: justify;
                    margin-bottom: 0.3rem;
                }



            }





        }



    }

    .swiperBox {
        padding: 0.6rem 0.3rem 0.9rem;
        position: relative;

        .swiper {
            width: 100%;
            position: relative;

            .swiperItem {
                width: 100%;
                box-sizing: border-box;

                .rowBox {
                    width: 100%;

                    .left {

                        .titleImg {
                            width: 5.25rem;
                            height: 0.9rem;
                            object-fit: contain;
                            display: block;
                        }
                    }

                    .right {
                        width: 100%;
                        height: 100%;

                        .img {
                            width: 100%;
                            height: 5.6rem;
                            object-fit: fill;
                            display: block;

                        }
                    }
                }

            }
        }

        .slideBox {
            position: absolute;
            bottom: 0.9rem;
            left: 0.3rem;
            z-index: 99;

            .optionItem {
                width: 0.5rem;
                height: 0.5rem;
                border-radius: 50%;
                overflow: hidden;
                background-color: #fff;
                font-size: 0.3rem;
                color: #0252A6;
                transition: all 0.3s;
            }
        }

        .slidePhoneBox {
            .optionItem {
                width: 0.5rem;
                height: 0.5rem;
                border-radius: 50%;
                overflow: hidden;
                background-color: rgba($color: #000000, $alpha: 0.6);
                font-size: 0.3rem;
                color: #fff;
                transition: all 0.3s;
                z-index: 999;
            }

            .pre {
                position: absolute;
                left: 30px;
                bottom: 190px;
            }

            .next {
                position: absolute;
                right: 50px;
                bottom: 190px;
            }
        }
    }

}

@media screen and (max-width: 768px) {
    .headBox {
        height: 5.2rem !important;

        .body {
            display: none;
        }
    }

    .designBox {
        padding: 0.6rem 0.3rem;

        .item:active {
            .infoMask {
                opacity: 1 !important;
            }

            img {
                transform: scale(1.1, 1.1);
            }

            .infoBox {
                transform: translateY(0) !important;
            }

        }
    }

    .swiperBox {
        .slideBox {
            display: none !important;
        }

        .slidePhoneBox {
            display: block !important;

            .optionItem:active {
                background-color: #0252A6;
                color: #fff;
                cursor: pointer;
            }
        }

    }


}

@media screen and (min-width: 768px) {

    .designBox {
        .item:hover {
            .infoMask {
                opacity: 1;
            }


            img {
                transform: scale(1.1, 1.1);
            }

            .infoBox {
                transform: translateY(0) !important;
            }

        }
    }

    .swiperBox {

        .slideBox {
            display: flex !important;

            .optionItem:hover {
                background-color: #0252A6;
                color: #fff;
                cursor: pointer;
            }
        }

        .slidePhoneBox {
            display: none !important;
        }
    }


}